<template>
  <div class="nav-list">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      background-color="#04193b"
      text-color="#fff"
      active-text-color="#fff"
    >
      <el-submenu index="0">
        <template slot="title">
          <span>特性展示</span>
        </template>
        <template v-for="item in equipmentList">
          <!-- 二级菜单 -->
          <template v-if="item.type === 1">
            <!-- 二级菜单的可以展开的标题 -->
            <el-submenu
              :index="item.id"
              :key="item.name"
              @click="submenuClick(item)"
            >
              <template #title>
                <i v-if="item.icon" :class="item.icon"></i>
                <span>{{ item.name }}</span>
              </template>
              <!-- 遍历里面的item -->
              <template v-for="subitem in item.children">
                <el-menu-item
                  :key="subitem.id"
                  :index="subitem.id"
                  @click="handleMenuItemClick(subitem)"
                  :class="{ 'current-class': subitem.id === currentItem }"
                >
                  <i v-if="subitem.icon" :class="subitem.icon"></i>
                  <span>{{ subitem.name }}</span>
                </el-menu-item>
              </template>
            </el-submenu>
          </template>
          <!-- 一级菜单 -->
          <template v-else-if="item.type === 2">
            <el-menu-item
              :index="item.id"
              :key="item.id"
              :class="{ 'current-class': item.id === currentItem }"
              @click="handleMenuItemClick(item)"
            >
              <i v-if="item.icon" :class="item.icon"></i>
              <span>{{ item.name }}</span>
            </el-menu-item>
          </template>
        </template>
      </el-submenu>
    </el-menu>

    <!-- <template>
      <div
        v-for="item in equipmentList"
        :key="item.name"
        class="list-item"
        :class="{ 'active-class': currentItem === item.name }"
        @click="itemClick(item.name, $event)"
      >
        {{ item.name }}
        <el-checkbox v-model="ischecked"></el-checkbox>
        <div v-if="item.children && item.children.length !== 0">
          <template v-for="childrenItem in item.children">
            <div
              :key="childrenItem.name"
              @click="itemChildClick(childrenItem.name, $event)"
            >
              {{ childrenItem.name }}
              <el-checkbox v-model="childrenIsChecked"></el-checkbox>
            </div>
          </template>
        </div>
      </div>
    </template> -->
    <!-- <el-tree
      :data="data"
      show-checkbox
      default-expand-all
      node-key="id"
      ref="tree"
      highlight-current
      @node-click="handleNodeClick"
      @check-change="handleCheckChange"
      check-strictly
      :props="defaultProps"
    >
    </el-tree> -->
  </div>
</template>
<script>
import "../../../assets/img/font_3156122_7rdln95acn/iconfont.css";
export default {
  data() {
    return {
      currentItem: "",
      editCheckId: "",
      isOpen: false,
      equipmentList: [
        {
          name: "卫星一",
          id: "1",
          type: 2,
          url: "/home/satIndex/1",
          routeName: "satIndex",
        },
        {
          name: "卫星二",
          id: "2",
          type: 1,
          url: "/home/satIndex/2",
          routeName: "satIndex",
          children: [
            {
              name: "传感器",
              id: "2-1",
              type: 2,
              url: "/home/satIndex/2/sensor/2-1",
              routeName: "satIndex",
            },
          ],
        },
        {
          name: "卫星三",
          id: "3",
          type: 2,
          url: "/home/satIndex/3",
          routeName: "satIndex",
        },
        {
          name: "火箭",
          id: "4",
          type: 2,
          url: "/home/socket/4",
          routeName: "satIndex",
        },
        {
          name: "测站",
          id: "5",
          type: 2,
          url: "/home/station/5",
          routeName: "satIndex",
        },
      ],
      data: [
        {
          id: 1,
          label: "卫星1",
          url: "/home/satIndex/1",
          routeName: "satIndex",
          children: [
            {
              id: 5,
              label: "传感器",
              url: "/home/satIndex/1",
              routeName: "sensor",
              // children: [],
            },
          ],
        },
        {
          id: 2,
          label: "卫星2",
          url: "/home/satIndex/2",
          routeName: "satIndex",
          children: [
            {
              id: 6,
              label: "传感器",
              url: "/home/satIndex/5/sensor/6",
              routeName: "sensor",
              // children: [],
            },
          ],
        },
        {
          id: 3,
          label: "火箭",
          url: "/home/socket/3",
          routeName: "socket",
          // children: [],
        },
        {
          id: 4,
          label: "测站",
          url: "/home/station/4",
          routeName: "socket",
          // children: [],
        },
      ],
      defaultProps: { children: "children", label: "label" },
    };
  },
  methods: {
    handleMenuItemClick(item) {
      // console.log(index, "itemclick");
      this.currentItem = item.id;
      this.$router.push({ name: item.routeName, params: { id: item.id } });
    },

    handleOpen(index) {
      // this.currentItem = index;
      if (index !== "0") {
        this.$router.push({ path: `/home/satIndex/${index}/sensor/${index}` });
      }
      this.isOpen = true;
    },
    handleNodeClick(item, node, self) {
      console.log(item, node, self);
      this.editCheckId = item.id;
      this.$refs.tree.setCheckedKeys([item.id]);
      this.$router.push(item.url);
    },
    // eslint-disable-next-line no-unused-vars
    handleCheckChange(item, node, self) {
      console.log("checked", item, node, self);
      if (node == true) {
        this.editCheckId = item.id;
        this.$refs.tree.setCheckedKeys([item.id]);
        this.$router.push(item.url);
      } else {
        if (this.editCheckId == item.id) {
          this.$refs.tree.setCheckedKeys([item.id]);
          this.$router.push(item.url);
        }
      }
    },
  },
};
</script>
<style scoped>
.nav-list /deep/ .el-menu {
  border: 0 !important;
  background-color: #041b3e !important;
}
/deep/.current-class {
  background-color: #00758c !important;
}
/deep/ .submenu-class .el-submenu__title {
  background-color: #00758c !important;
}
</style>
